<template>
    <dl
        class="tarbar_item"
        :class="value + '' === active + '' ? 'active' : ''"
        @click="itemClick"
    >
        <dt>
            <svg-icon :iconClass="icon" />
        </dt>
        <dd>
            <slot></slot>
        </dd>
    </dl>
</template>

<script>
export default {
    name: 'tabbar-item',
    props: {
        icon: {
            type: String,
        },
        to: {},
    },
    computed: {
        value() {
            return this.$parent.value || 0
        },
    },
    data() {
        return {
            active: 0,
        }
    },
    created() {
        this.active = this.$parent.$children.indexOf(this)
    },
    methods: {
        itemClick() {
            this.$parent.$emit('itemClick', this.active)
            this.$router.push({
                path: this.to,
            })
        },
    },
}
</script>

<style lang='scss'>
@import '@css/style.scss';
.tarbar_item {
    flex: 1;
    text-align: center;
    dt {
        font-size: px2rem(20);
    }
    dd {
        font-size: px2rem(14);
    }
}
.active {
    color: $btnColor;
    dt {
        color: $btnColor;
    }
}
</style>